<template>
  <div class="dashboard-container">
    <div style="padding: 20px">
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        height="calc(100vh - 160px)"
        style="width: 100%;"
        size="mini"
        border
        tooltip-effect="dark"
        :header-cell-style="{ background: '#eaf1fd', color: '#333' }"
      >
        <el-table-column
          label="文件名"
          min-width="300"
          prop="file_name"
        />
        <el-table-column
          label="大小"
          width="100"
          prop="size"
        />
        <el-table-column label="状态" prop="method" width="100">
          <template #default="{ row }">
            <div>
              <span v-if="row.status == 0">未处理</span>
              <span v-if="row.status == 1" style="color:blue">处理中</span>
              <span v-if="row.status == 2" style="color:green">已完成</span>
              <span v-if="row.status == 3" style="color:red">失败</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="失败原因"
          width="200"
          prop="desc"
        />
        <el-table-column
          label="创建时间"
          width="150"
          prop="create_time"
        />
        <el-table-column
          label="完成时间"
          width="150"
          prop="over_time"
        />
        <el-table-column label="操作" prop="method" width="100">
          <template #default="{ row }">
            <div>
              <el-button v-if="row.status == 2" type="warning" @click="download(row)">下载</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { downloadTaskList, downloadFile } from '@/api/admin/index'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'Dashboard',
  components: {
    Pagination
    // Detial
  },
  data() {
    return {
      data_arr: [],
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        tid: '',
        batch_no: '',
        created: []
      }
    }
  },
  computed: {
  },
  created() {
    this.getList()
  },
  methods: {
    reloadList() {
      this.listQuery.page = 1
      this.visible = false
      this.getList()
    },
    getList() {
      this.listLoading = true
      downloadTaskList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    download(row) {
      downloadFile({
        path: row.path
      }).then(res => {
        this.downloadHandler(res, row.file_name)
      })
    },
    downloadHandler(data, name) {
      // 匹配任意文件类型：type : "application/octet-stream"
      const blob = new Blob([data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
      })
      // 获取heads中的filename文件名
      const downloadElement = document.createElement('a')
      // 创建下载的链接
      const href = window.URL.createObjectURL(blob)
      downloadElement.href = href
      // 下载后文件名
      downloadElement.download = name
      document.body.appendChild(downloadElement)
      // 点击下载
      downloadElement.click()
      // 下载完成移除元素
      document.body.removeChild(downloadElement)
      // 释放掉blob对象
      window.URL.revokeObjectURL(href)
    }
  }
}
</script>
<style scoped>
.filter-container{
  padding:20px 20px 10px;
}

.upload-demo{
  margin: 20px 0 10px;
}
</style>
